<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利特尔商城</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
       /* body{
            background-image: url("imgs/bg.jpg");
            margin: 0;
            background-size: contain;
            background-repeat: no-repeat;
            text-align: center;
        }*/
        .el-header img{
            vertical-align: middle;/*设置中间对齐*/
        }
        .el-header a{
            color: #666;
            text-decoration: none;
        }
        .el-table .el-table__cell{
            padding: 0/*去掉自带的内边距*/;
        }
        /*选择所有表格中的行 设置不换行*/
        .el-table .cell{
            white-space: nowrap;
            text-overflow: ellipsis;/*设置文本超出时 省略号*/
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header style="height: 160px;">
            <!--顶栏开始-->
            <div style=" width: 1200px;height: 100px;margin: 0 auto;position: relative;top: 10px">
                <div style="float: left">
                    <img src="imgs/1-230113101P9D8.png">
                </div>
                <div style="position:relative; top:20px">
                    <a href="">品牌信息</a><el-divider direction="vertical"></el-divider>
                    <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
                    <a href="">商家入驻</a><el-divider direction="vertical"></el-divider>
                    <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
                    <a href="">帮助</a>
                    <div style="float: right">
                        <a href=""><i class="el-icon-user"></i>登录</a><el-divider direction="vertical"></el-divider>
                        <a href=""><i class="el-icon-user-solid"></i>注册</a>
                    </div>
                </div>

            </div>
            <!--顶栏结束-->
            <!--导航菜单开始-->
            <div style="background-color: burlywood;height: 60px">
                <el-menu style="width: 1200px;margin:0 auto;border: burlywood" mode="horizontal" background-color="burlywood"
                         text-color="#fff" active-text-color="#fff">
                    <div style="float: left;position: relative;top: 15px">
                        <img src="imgs/favicon.ico">
                        <b>利特尔商城</b>
                    </div>
                    <el-menu-item index="1">首页</el-menu-item>
                    <el-menu-item index="2">个人信息</el-menu-item>
                    <el-menu-item index="3">消息通知</el-menu-item>
                    <el-menu-item index="4">历史记录</el-menu-item>
                    <el-menu-item index="5"><i class="el-icon-star-off"></i>我的收藏</el-menu-item>
                    <el-menu-item index="6"><i class="el-icon-shopping-cart-2"></i>我的订单</el-menu-item>
                    <div style="float: right;position: relative;top: 10px">
                        <el-input placeholder="请输入搜索的内容">
                            <!--slot="append"作用是把按钮追加在文本框里面-->
                            <el-button slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                </el-menu>
            </div>
            <!--导航菜单结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 0 auto">
            <el-row gutter="20">
                <!--侧边栏开始-->
                <el-col span="6">
                    <!--导航菜单开始-->
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">

                        <el-menu-item index="1">
                            <i class="el-icon-location"></i>
                            <span slot="title">关于我们</span>
                        </el-menu-item>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">产品展示</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">案例展示</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">新闻动态</span>
                        </el-menu-item>
                        <el-menu-item index="5">
                            <i class="el-icon-setting"></i>
                            <span slot="title">联系我们</span>
                        </el-menu-item>
                    </el-menu>
                    <!--导航菜单结束-->
                </el-col>
                <!--侧边栏结束-->
                <el-col span="12">
                    <!--导航菜单开始-->
                    <!--导航菜单结束-->
                    <!--轮播图开始-->
                    <el-carousel height="280px">
                        <el-carousel-item v-for="url in arr">
                            <img :src="url" width="100%" height="100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                    <!--轮播图结束-->
                </el-col>
                <!--排行榜开始-->
                <el-col span="6">
                    <el-card>
                        <h3>
                            <i style="font-weight: bold" class="el-icon-trophy">热销榜</i>
                        </h3>
                        <el-divider></el-divider>
                        <el-table :data="topArr">
                            <el-table-column label="排名" width="50" type="index"></el-table-column>
                            <el-table-column label="商品标题" width="80" prop="title"></el-table-column>
                            <el-table-column label="销量" width="80" prop="saleCount"></el-table-column>
                        </el-table>
                    </el-card>
                </el-col>
                <!--排行榜结束-->
            </el-row>
            <!--商品列表导航栏-->
            <el-row>
                <el-col>
                    <div style="background-color: #e8e8e8; color: #2c683b;font-size: 23px;margin-bottom: 12px" >
                        <span>德国高端进口，站在制高点，俯瞰同行业</span>
                        <div style="color: black;float: right; font-size: 22px">
                            <span>专业为广大冲压、剪切用户配套自动化的生产线</span>
                            <i class="el-icon-phone-outline"></i>
                            <span>联系方式:020-66668888</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <!--商品列表开始-->
            <el-row gutter="20">
                <el-col span="6" v-for="p in productArr">
                    <el-card style=" background-color: #e8e8e8">
                        <img :src="p.url" width="100%" height="200px">
                        <div>
                            <p style="font-size: 15px;height: 40px;margin-top: 0">
                                {{p.title}}
                            </p>
                            <p style="font-size: 12px;color: #666">
                                ￥{{p.price}} <s>{{p.oldPrice}}</s>
                                <span style="float: right">销量:{{p.saleCount}}</span>
                            </p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
        </el-main>
        <el-footer>
            <div style="background-image: url('imgs/wave.png');height: 90px"></div>
            <div style="background-color: #3f3f3f;text-align: center;
      color: #b1b1b1;padding: 30px 0">
                <p>Copyright © 江苏昆山利特尔科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖多门机械工程体系，致力于打造权威的机械工程平台，利特尔在线:专注于机械科技</p>
                <p>利特尔科技有限公司</p>
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex:"1",
                activeIndex: '1',
                activeIndex2: '1',

                arr:["imgs/1-230113112603601.jpg","imgs/header02.png","imgs/header03.png"],
                topArr:[{title:"精密薄板三合一送料机",saleCount:685},{title:"精密中板三合一送料机",saleCount:457},
                    {title:"精密厚板三合一送料机",saleCount:185},{title:"精密高强板三合一送料机",saleCount:57},
                    {title:"NC伺服送料机",saleCount:32},{title:"伺服偏摆送料机",saleCount:18}],
                productArr:[{title:"精密中板三合一送料机",price:233,oldPrice:598,url:"imgs/main01.png",saleCount:2342},
                    {title:"精密厚板三合一送料机",price:233,oldPrice:598,url:"imgs/main02.png",saleCount:2342},
                    {title:"精密高强板三合一送料机",price:233,oldPrice:598,url:"imgs/main03.png",saleCount:2342},
                    {title:"NC伺服送料机",price:233,oldPrice:598,url:"imgs/main04.png",saleCount:2342},
                    {title:"伺服偏摆送料机",price:233,oldPrice:598,url:"imgs/main05.png",saleCount:2342},
                    {title:"精密整平送料剪切一体机",price:233,oldPrice:598,url:"imgs/main06.png",saleCount:2342},
                    {title:"高速滚轮送料机",price:233,oldPrice:598,url:"imgs/main07.png",saleCount:2342},
                    {title:"超精密整平机",price:233,oldPrice:598,url:"imgs/main08.png",saleCount:2342},
                    {title:"GJ型精密薄板材料整平机",price:233,oldPrice:598,url:"imgs/main09.png",saleCount:2342},
                    {title:"JM3型精密材料整平机",price:233,oldPrice:598,url:"imgs/main10.png",saleCount:2342},
                    {title:"S型整平机",price:233,oldPrice:598,url:"imgs/main11.png",saleCount:2342},
                    {title:"半截材料矫正机",price:233,oldPrice:598,url:"imgs/main12.png",saleCount:2342}
                ]
            }
        },
        methods: {
            handleSelect(key,keyPath){
                console.log(key,keyPath);
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</html>